React Custom Hook State Machine: Menguasai Abstraksi Logika State yang Kompleks

Seiring bertambahnya kompleksitas aplikasi React, mengelola state dapat menjadi tantangan yang signifikan. Pendekatan tradisional menggunakan `useState` dan `useEffect` dapat dengan cepat mengarah pada logika yang kusut dan kode yang sulit dipelihara, terutama ketika berhadapan dengan transisi state dan efek samping yang rumit. Di sinilah state machine, dan khususnya custom hook React yang mengimplementasikannya, hadir untuk membantu. Artikel ini akan memandu Anda melalui konsep state machine, mendemonstrasikan cara mengimplementasikannya sebagai custom hook di React, dan mengilustrasikan manfaat yang ditawarkannya untuk membangun aplikasi yang skalabel dan mudah dipelihara untuk audiens global.

Apa Itu State Machine?

State machine (atau finite state machine, FSM) adalah model komputasi matematis yang menjelaskan perilaku suatu sistem dengan mendefinisikan sejumlah state yang terbatas dan transisi antar state tersebut. Pikirkan seperti flowchart, tetapi dengan aturan yang lebih ketat dan definisi yang lebih formal. Konsep kunci meliputi:

• States (Keadaan): Mewakili kondisi atau fase sistem yang berbeda.
• Transitions (Transisi): Mendefinisikan bagaimana sistem bergerak dari satu state ke state lain berdasarkan event atau kondisi tertentu.
• Events (Peristiwa): Pemicu yang menyebabkan transisi state.
• Initial State (Keadaan Awal): State tempat sistem mulai.

State machine unggul dalam memodelkan sistem dengan state yang terdefinisi dengan baik dan transisi yang jelas. Contohnya banyak ditemukan dalam skenario dunia nyata:

• Lampu Lalu Lintas: Berputar melalui state seperti Merah, Kuning, Hijau, dengan transisi yang dipicu oleh timer. Ini adalah contoh yang dikenali secara global.
• Pemrosesan Pesanan: Pesanan e-commerce mungkin bertransisi melalui state seperti "Tertunda," "Memproses," "Dikirim," dan "Terkirim." Ini berlaku secara universal untuk ritel online.
• Alur Otentikasi: Proses otentikasi pengguna dapat melibatkan state seperti "Keluar," "Masuk," "Masuk," dan "Error." Protokol keamanan umumnya konsisten di berbagai negara.

Mengapa Menggunakan State Machine di React?

Mengintegrasikan state machine ke dalam komponen React Anda menawarkan beberapa keuntungan yang menarik:

• Organisasi Kode yang Ditingkatkan: State machine memberlakukan pendekatan terstruktur untuk manajemen state, membuat kode Anda lebih dapat diprediksi dan lebih mudah dipahami. Tidak ada lagi spaghetti code!
• Pengurangan Kompleksitas: Dengan secara eksplisit mendefinisikan state dan transisi, Anda dapat menyederhanakan logika yang kompleks dan menghindari efek samping yang tidak diinginkan.
• Testability yang Ditingkatkan: State machine secara inheren dapat diuji. Anda dapat dengan mudah memverifikasi bahwa sistem Anda berperilaku benar dengan menguji setiap state dan transisi.
• Pemeliharaan yang Ditingkatkan: Sifat deklaratif dari state machine membuatnya lebih mudah untuk memodifikasi dan memperluas kode Anda seiring evolusi aplikasi Anda.
• Visualisasi yang Lebih Baik: Ada alat yang dapat memvisualisasikan state machine, memberikan gambaran yang jelas tentang perilaku sistem Anda, membantu kolaborasi dan pemahaman antar tim dengan keahlian yang beragam.

Mengimplementasikan State Machine sebagai React Custom Hook

Mari kita ilustrasikan cara mengimplementasikan state machine menggunakan custom hook React. Kita akan membuat contoh sederhana tombol yang dapat berada dalam tiga state: `idle`, `loading`, dan `success`. Tombol dimulai dalam state `idle`. Saat diklik, tombol bertransisi ke state `loading`, mensimulasikan proses pemuatan (menggunakan `setTimeout`), dan kemudian bertransisi ke state `success`.

1. Definisikan State Machine

Pertama, kita mendefinisikan state dan transisi dari state machine tombol kita:

const buttonStateMachineDefinition = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success', // Setelah 2 detik, transisi ke success
      },
    },
    success: {},
  },
};

Konfigurasi ini menggunakan pendekatan yang independen dari library (meskipun terinspirasi oleh XState) untuk mendefinisikan state machine. Kita akan mengimplementasikan logika untuk menafsirkan definisi ini sendiri di dalam custom hook. Properti `initial` mengatur state awal ke `idle`. Properti `states` mendefinisikan state yang mungkin (`idle`, `loading`, dan `success`) dan transisinya. State `idle` memiliki properti `on` yang mendefinisikan transisi ke state `loading` ketika event `CLICK` terjadi. State `loading` menggunakan properti `after` untuk secara otomatis bertransisi ke state `success` setelah 2000 milidetik (2 detik). State `success` adalah state terminal dalam contoh ini.

2. Buat Custom Hook

Sekarang, mari kita buat custom hook yang mengimplementasikan logika state machine:

import { useState, useEffect } from 'react';

const useStateMachine = (stateMachineDefinition) => {
  const [currentState, setCurrentState] = useState(stateMachineDefinition.initial);
  const [context, setContext] = useState({});

  const transition = (event) => {
    const stateDefinition = stateMachineDefinition.states[currentState];
    if (stateDefinition && stateDefinition.on && stateDefinition.on[event]) {
      setCurrentState(stateDefinition.on[event]);
    }
  };

  useEffect(() => {
    const stateDefinition = stateMachineDefinition.states[currentState];
    if (stateDefinition && stateDefinition.after) {
      const timeoutKeys = Object.keys(stateDefinition.after);
      timeoutKeys.forEach(timeoutKey => {
        const timeout = parseInt(timeoutKey, 10);
        const nextState = stateDefinition.after[timeoutKey];
        const timer = setTimeout(() => {
          setCurrentState(nextState);
          clearTimeout(timer);
        }, timeout);

        return () => clearTimeout(timer); // Cleanup on unmount or state change
      });
    }
  }, [currentState, stateMachineDefinition.states]);

  return {
    currentState,
    context,
    transition,
  };
};

export default useStateMachine;

Hook `useStateMachine` ini mengambil definisi state machine sebagai argumen. Ini menggunakan `useState` untuk mengelola state saat ini dan konteks (akan kita jelaskan konteks nanti). Fungsi `transition` mengambil event sebagai argumen dan memperbarui state saat ini berdasarkan transisi yang ditentukan dalam definisi state machine. Hook `useEffect` menangani properti `after`, mengatur timer untuk secara otomatis bertransisi ke state berikutnya setelah durasi yang ditentukan. Hook mengembalikan state saat ini, konteks, dan fungsi `transition`.

3. Gunakan Custom Hook di Komponen

Terakhir, mari kita gunakan custom hook di komponen React:

import React from 'react';
import useStateMachine from './useStateMachine';

const buttonStateMachineDefinition = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success', // Setelah 2 detik, transisi ke success
      },
    },
    success: {},
  },
};

const MyButton = () => {
  const { currentState, transition } = useStateMachine(buttonStateMachineDefinition);

  const handleClick = () => {
    if (currentState === 'idle') {
      transition('CLICK');
    }
  };

  let buttonText = 'Click Me';
  if (currentState === 'loading') {
    buttonText = 'Loading...';
  } else if (currentState === 'success') {
    buttonText = 'Success!';
  }

  return (
    
      {buttonText}
    
  );
};

export default MyButton;

Komponen ini menggunakan hook `useStateMachine` untuk mengelola state tombol. Fungsi `handleClick` mengirimkan event `CLICK` saat tombol diklik (dan hanya jika dalam state `idle`). Komponen menampilkan teks yang berbeda berdasarkan state saat ini. Tombol dinonaktifkan saat memuat untuk mencegah klik ganda.

Menangani Konteks dalam State Machine

Dalam banyak skenario dunia nyata, state machine perlu mengelola data yang tetap ada di seluruh transisi state. Data ini disebut konteks. Konteks memungkinkan Anda menyimpan dan memperbarui informasi yang relevan seiring kemajuan state machine.

Mari kita perluas contoh tombol kita untuk menyertakan penghitung yang bertambah setiap kali tombol berhasil dimuat. Kita akan memodifikasi definisi state machine dan custom hook untuk menangani konteks.

1. Perbarui Definisi State Machine

const buttonStateMachineDefinition = {
  initial: 'idle',
  context: {
    count: 0,
  },
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success',
      },
    },
    success: {
      entry: (context) => {
        return { ...context, count: context.count + 1 };
      },
    },
  },
};

Kita telah menambahkan properti `context` ke definisi state machine dengan nilai awal `count` 0. Kita juga telah menambahkan aksi `entry` ke state `success`. Aksi `entry` dieksekusi ketika state machine memasuki state `success`. Aksi ini mengambil konteks saat ini sebagai argumen dan mengembalikan konteks baru dengan `count` yang bertambah. `entry` di sini menunjukkan contoh modifikasi konteks. Karena objek Javascript diteruskan berdasarkan referensi, penting untuk mengembalikan objek *baru* alih-alih memutasi objek asli.

2. Perbarui Custom Hook

import { useState, useEffect } from 'react';

const useStateMachine = (stateMachineDefinition) => {
  const [currentState, setCurrentState] = useState(stateMachineDefinition.initial);
  const [context, setContext] = useState(stateMachineDefinition.context || {});

  const transition = (event) => {
    const stateDefinition = stateMachineDefinition.states[currentState];
    if (stateDefinition && stateDefinition.on && stateDefinition.on[event]) {
      setCurrentState(stateDefinition.on[event]);
    }
  };

  useEffect(() => {
    const stateDefinition = stateMachineDefinition.states[currentState];

    if(stateDefinition && stateDefinition.entry){
      const newContext = stateDefinition.entry(context);
      setContext(newContext);
    }

    if (stateDefinition && stateDefinition.after) {
      const timeoutKeys = Object.keys(stateDefinition.after);
      timeoutKeys.forEach(timeoutKey => {
        const timeout = parseInt(timeoutKey, 10);
        const nextState = stateDefinition.after[timeoutKey];
        const timer = setTimeout(() => {
          setCurrentState(nextState);
          clearTimeout(timer);
        }, timeout);

        return () => clearTimeout(timer); // Cleanup on unmount or state change
      });
    }
  }, [currentState, stateMachineDefinition.states, context]);

  return {
    currentState,
    context,
    transition,
  };
};

export default useStateMachine;

Kita telah memperbarui hook `useStateMachine` untuk menginisialisasi state `context` dengan `stateMachineDefinition.context` atau objek kosong jika tidak ada konteks yang disediakan. Kita juga telah menambahkan `useEffect` untuk menangani aksi `entry`. Ketika state saat ini memiliki aksi `entry`, kita mengeksekusinya dan memperbarui konteks dengan nilai yang dikembalikan.

3. Gunakan Hook yang Diperbarui di Komponen

import React from 'react';
import useStateMachine from './useStateMachine';

const buttonStateMachineDefinition = {
  initial: 'idle',
  context: {
    count: 0,
  },
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success',
      },
    },
    success: {
      entry: (context) => {
        return { ...context, count: context.count + 1 };
      },
    },
  },
};

const MyButton = () => {
  const { currentState, context, transition } = useStateMachine(buttonStateMachineDefinition);

  const handleClick = () => {
    if (currentState === 'idle') {
      transition('CLICK');
    }
  };

  let buttonText = 'Click Me';
  if (currentState === 'loading') {
    buttonText = 'Loading...';
  } else if (currentState === 'success') {
    buttonText = 'Success!';
  }

  return (
    

      
        {buttonText}
      
      
Count: {context.count}
    
  );
};

export default MyButton;

Kita sekarang mengakses `context.count` di komponen dan menampilkannya. Setiap kali tombol berhasil dimuat, hitungan akan bertambah.

Konsep State Machine Tingkat Lanjut

Meskipun contoh kita relatif sederhana, state machine dapat menangani skenario yang jauh lebih kompleks. Berikut adalah beberapa konsep lanjutan yang perlu dipertimbangkan:

• Guards: Kondisi yang harus dipenuhi agar transisi terjadi. Misalnya, transisi mungkin hanya diizinkan jika pengguna diautentikasi atau jika nilai data tertentu melebihi ambang batas.
• Actions: Efek samping yang dieksekusi saat memasuki atau keluar dari suatu state. Ini bisa termasuk melakukan panggilan API, memperbarui DOM, atau mengirimkan event ke komponen lain.
• Parallel States: Memungkinkan Anda memodelkan sistem dengan banyak aktivitas bersamaan. Misalnya, pemutar video mungkin memiliki satu state machine untuk kontrol pemutaran (putar, jeda, berhenti) dan yang lain untuk mengelola kualitas video (rendah, sedang, tinggi).
• Hierarchical States: Memungkinkan Anda menyarangkan state di dalam state lain, menciptakan hierarki state. Ini bisa berguna untuk memodelkan sistem kompleks dengan banyak state terkait.

Library Alternatif: XState dan Lainnya

Meskipun custom hook kita menyediakan implementasi dasar dari state machine, beberapa library yang sangat baik dapat menyederhanakan proses dan menawarkan fitur yang lebih canggih.

XState

XState adalah library JavaScript populer untuk membuat, menafsirkan, dan mengeksekusi state machine dan statechart. Library ini menyediakan API yang kuat dan fleksibel untuk mendefinisikan state machine yang kompleks, termasuk dukungan untuk guards, actions, parallel states, dan hierarchical states. XState juga menawarkan alat yang sangat baik untuk memvisualisasikan dan men-debug state machine.

Library Lainnya

Pilihan lain termasuk:

• Robot: Library manajemen state yang ringan dengan fokus pada kesederhanaan dan kinerja.
• react-automata: Library yang dirancang khusus untuk mengintegrasikan state machine ke dalam komponen React.

Pilihan library bergantung pada kebutuhan spesifik proyek Anda. XState adalah pilihan yang baik untuk state machine yang kompleks, sementara Robot dan react-automata cocok untuk skenario yang lebih sederhana.

Praktik Terbaik untuk Menggunakan State Machine

Untuk memanfaatkan state machine secara efektif dalam aplikasi React Anda, pertimbangkan praktik terbaik berikut:

• Mulai dari yang Kecil: Mulailah dengan state machine sederhana dan tingkatkan kompleksitas secara bertahap sesuai kebutuhan.
• Visualisasikan State Machine Anda: Gunakan alat visualisasi untuk mendapatkan pemahaman yang jelas tentang perilaku state machine Anda.
• Tulis Tes yang Komprehensif: Uji setiap state dan transisi secara menyeluruh untuk memastikan sistem Anda berperilaku benar.
• Dokumentasikan State Machine Anda: Dokumentasikan dengan jelas state, transisi, guards, dan actions dari state machine Anda.
• Pertimbangkan Internasionalisasi (i18n): Jika aplikasi Anda menargetkan audiens global, pastikan logika state machine dan antarmuka pengguna Anda diinternasionalisasi dengan benar. Misalnya, gunakan state machine atau konteks terpisah untuk menangani format tanggal atau simbol mata uang yang berbeda berdasarkan lokal pengguna.
• Aksesibilitas (a11y): Pastikan transisi state dan pembaruan UI dapat diakses oleh pengguna dengan disabilitas. Gunakan atribut ARIA dan HTML semantik untuk memberikan konteks dan umpan balik yang tepat kepada teknologi bantu.

Kesimpulan

Custom hook React yang dikombinasikan dengan state machine menyediakan pendekatan yang kuat dan efektif untuk mengelola logika state yang kompleks dalam aplikasi React. Dengan mengabstraksi transisi state dan efek samping ke dalam model yang terdefinisi dengan baik, Anda dapat meningkatkan organisasi kode, mengurangi kompleksitas, meningkatkan testability, dan meningkatkan pemeliharaan. Baik Anda mengimplementasikan custom hook Anda sendiri atau memanfaatkan library seperti XState, menggabungkan state machine ke dalam alur kerja React Anda dapat secara signifikan meningkatkan kualitas dan skalabilitas aplikasi Anda untuk pengguna di seluruh dunia.